<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
    <select name="con" id="con"></select>
    <select name="city" id="city"></select>
</body>
<script>
      // 声明数组
        // 国家的信息
      var conList = ['中国', '美国', '英国', '日本', '德国'];
        // 城市的信息 二维数组
        var cityList = new Array();
        cityList[0] = ['北京', '上海', '天津', '重庆', '南京'];
        cityList[1] = ['纽约', '洛杉矶', '芝加哥', '旧金山', '华盛顿'];
        cityList[2] = ['伦敦', '伯明翰', '曼彻斯特', '剑桥', '爱丁堡'];
        cityList[3] = ['东京', '北海道', '福冈县', '广岛', '大阪'];
        cityList[4] = ['柏林', '汉堡', '慕尼黑', '科隆', '法兰克福'];


        var con =  document.getElementById("con");
        var city = document.getElementById("city");

        //国家下拉框填值
        for(var i =0;i<conList.length;i++)
        {
            //添加select option元素
            //con.innerHTML += "<option value="+i+">"+conList[i]+"</option>"
            con.add(new Option(conList[i],i));
        }

        //给城市下拉框填值
        con.onchange = function(){
            //city.innerHTML = "";
            city.options.length = 0;

            var index = con.value;

            console.log(index);
            for(var j=0;j<cityList[index].length;j++)
            {

                city.add(new Option(cityList[index][j],j));
            }
        }

        //手动触发
        con.onchange();
</script>
</html>